<script lang="ts" setup>
import { getCurrentInstance, reactive, ref } from 'vue'
import { onPageScroll, onReady } from '@dcloudio/uni-app'
import { tnNavPage } from '@tuniao/tnui-vue3-uniapp/utils'
import type { NavbarRectInfo } from '@tuniao/tnui-vue3-uniapp/components/navbar'
import PageContainer from '@/components/page-container/index.vue'
import { useScrollTransparentNavbar } from '@/hooks'
import user from '@/api/user.js'
import { FILE_URL, USER_TOKEN } from '@/api/config.js'

const paging = ref(null)
// 导航栏的高度
const navbarHeight = ref(0)
const instance = getCurrentInstance()
const state = reactive({
  userLists: [],
  userToken: '',
})

const queryList = (pageNo: any, pageSize: any) => {
  state.userToken = uni.getStorageSync(USER_TOKEN)

  user
    .recommendUsers({
      page: pageNo,
      page_size: pageSize,
    })
    .then((res) => {
      console.log(res)
      paging.value.complete(res.data)
    })
    .catch((err) => {
      paging.value.complete(false)
    })
}

const { init: initTransparentScroll, opacityScrollHandle } =
  useScrollTransparentNavbar(instance)

// 导航栏初始化完毕
const navbarInitFinishHandle = (info: NavbarRectInfo) => {
  navbarHeight.value = info.height
}
const navUserHomePage = (uId: number) => {
  if (state.userToken == '') {
    uni.showModal({
      title: '提示',
      content: '请登录后进行操作！',
      confirmText: '去登录',
      cancelText: '取消',
      success: (res) => {
        if (res.confirm) {
          tnNavPage('/pages/login/login')
        }
      },
    })
    return
  }
  tnNavPage(`/pagesA/userhome?otherUserId=${uId}`)
}
onReady(() => {
  initTransparentScroll()
})
onPageScroll((e) => {
  opacityScrollHandle(e.scrollTop)
})
</script>

<template>
  <PageContainer :placeholder-bottom="true">
    <TnNavbar
      fixed
      :bottom-shadow="false"
      :placeholder="false"
      @init-finish="navbarInitFinishHandle"
    >
      推荐用户
    </TnNavbar>
    <view class="container">
      <z-paging
        ref="paging"
        v-model="state.userLists"
        :paging-style="{ paddingTop: `${navbarHeight}px` }"
        @query="queryList"
      >
        <view class="">
          <view
            v-for="(item, index) in state.userLists"
            :key="index"
            class="tn-flex user-lists tn-flex-col-center"
            @tap.stop="navUserHomePage(item.id)"
          >
            <view class="">
              <view class="logo-pic">
                <view class="logo-image">
                  <view
                    class=""
                    :style="
                      'background-image:url(' +
                      FILE_URL +
                      item.avatar +
                      ');width: 90rpx;height: 90rpx;background-size: cover;'
                    "
                  />
                </view>
              </view>
            </view>
            <view class="tn-pl-sm">
              <view class="tn-flex justify-between tn-text-ellipsis-1">
                <view class="justify-content-item">
                  <text class="tn-text-lg">{{ item.nickname }}</text>
                </view>
              </view>
              <view class="tn-pt-xs tn-text-ellipsis tn-text-ellipsis-1">
                <text class="tn-color-gray tn-text-sm">{{ item.introduce }}</text>
              </view>
            </view>
            <!-- <view class="" style="width: 20vw">
              <view class="tn-flex justify-end tn-mb-xs tn-mt-xs">
                <text class="tn-color-gray tn-text-sm">2024-12-01</text>
              </view>
            </view> -->
          </view>
        </view>

        <view class="tn-tabbar-height" />
      </z-paging>
    </view>
  </PageContainer>
</template>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background: #f8f7f8;

  .user-lists {
    background-color: #ffffff;
    border-radius: 18rpx;
    margin: 20rpx 30rpx;
    padding: 20rpx;
  }
}

/* 用户头像 start */
.logo-image {
  width: 90rpx;
  height: 90rpx;
  position: relative;
}

.logo-pic {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 50rpx;
  overflow: hidden;
}

/* 底部安全边距 start*/
.tn-tabbar-height {
  min-height: 120rpx;
  height: calc(140rpx + env(safe-area-inset-bottom));
  height: calc(140rpx + constant(safe-area-inset-bottom));
}
</style>
